<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>数据库产品列表</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #409EFF;
            color: white;
            font-size: 18px;
            z-index: 1000;
        }
        .refresh-indicator {
            text-align: center;
            padding: 10px 0;
            color: #666;
            font-size: 14px;
            display: none;
        }
        .product-list {
            padding: 50px 10px 10px;
        }
        .product-item {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
            padding: 10px;
            transition: all 0.3s ease;
            display: flex;
            align-items: flex-start;
        }
        .product-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        .product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 15px;
            margin-bottom: 0;
        }
        .product-name {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 5px;
            color: #333;
        }
        .product-content {
            flex: 1;
            min-width: 0;
        }
        .product-desc {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            display: none; /* 隐藏描述信息，与截图一致 */
        }
        .product-tags {
            margin-bottom: 5px;
        }
        .product-tag {
            display: inline-block;
            padding: 3px 8px;
            margin-right: 5px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
            background-color: #409EFF;
        }
        .product-info {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        .loading-more {
            text-align: center;
            padding: 20px 0;
            color: #666;
            font-size: 14px;
        }
        .load-complete {
            text-align: center;
            padding: 20px 0;
            color: #999;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="header">数据库产品列表</div>
    <div class="refresh-indicator" id="refreshIndicator">释放刷新...</div>
    <div class="product-list" id="productList"></div>
    <div class="loading-more" id="loadingMore">加载中...</div>
    <div class="load-complete" id="loadComplete" style="display: none;">没有更多数据了</div>

    <script>
        // 配置
        const API_URL = 'http://localhost:8080/system/product/list';
        const IMAGE_PREFIX = 'http://localhost:8080/';
        const PAGE_SIZE = 10;

        // 状态
        let currentPage = 1;
        let total = 0;
        let isLoading = false;
        let isRefreshing = false;
        let startY = 0;
        let scrollTop = 0;

        // 元素
        const productList = document.getElementById('productList');
        const loadingMore = document.getElementById('loadingMore');
        const loadComplete = document.getElementById('loadComplete');
        const refreshIndicator = document.getElementById('refreshIndicator');

        // 初始化
        window.onload = function() {
            fetchData();
            initPullRefresh();
            initInfiniteScroll();
        };

        // 获取数据
        async function fetchData() {
            if (isLoading) return;
            
            isLoading = true;
            
            try {
                const response = await fetch(`${API_URL}?pageNum=${currentPage}&pageSize=${PAGE_SIZE}`);
                const data = await response.json();
                
                if (data.code === 200) {
                    total = data.total;
                    renderProducts(data.rows, currentPage === 1);
                    
                    if (currentPage * PAGE_SIZE >= total) {
                        loadingMore.style.display = 'none';
                        loadComplete.style.display = 'block';
                    } else {
                        loadingMore.style.display = 'block';
                        loadComplete.style.display = 'none';
                    }
                    
                    currentPage++;
                } else {
                    console.error('请求失败:', data.msg);
                }
            } catch (error) {
                console.error('网络错误:', error);
            } finally {
                isLoading = false;
            }
        }

        // 渲染产品列表
        function renderProducts(products, isRefresh) {
            let html = '';
            
            products.forEach(product => {
                const imageUrl = './images/' + product.dbName.toLowerCase() + '.svg';
                // 处理标签显示
                const tagsHtml = [];
                if (product.dbType) tagsHtml.push(`<span class="product-tag">${product.dbType}</span>`);
                if (product.status === '0') tagsHtml.push(`<span class="product-tag">单机</span>`); // 假设status为0表示单机
                html += `
                    <div class="product-item">
                        <img class="product-image" src="${imageUrl}" alt="${product.dbName}" onerror="this.style.display='none'">
                        <div class="product-content">
                            <div class="product-name">${product.dbName}</div>
                            <div class="product-tags">${tagsHtml.join(' ')}</div>
                            <div class="product-info">
                                <span>更新时间: ${product.updateTime || '未设置'}</span>
                            </div>
                        </div>
                    </div>
                `;
            });
            
            if (isRefresh) {
                productList.innerHTML = html;
            } else {
                productList.innerHTML += html;
            }
        }

        // 初始化下拉刷新
        function initPullRefresh() {
            document.addEventListener('touchstart', e => {
                if (isLoading || isRefreshing) return;
                scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop > 0) return;
                startY = e.touches[0].clientY;
            });

            document.addEventListener('touchmove', e => {
                if (isLoading || isRefreshing) return;
                if (startY === 0) return;
                
                const currentY = e.touches[0].clientY;
                const diff = currentY - startY;
                
                if (diff > 0) {
                    e.preventDefault();
                    const translateY = Math.min(diff / 2, 50);
                    refreshIndicator.style.transform = `translateY(${translateY}px)`;
                    refreshIndicator.style.display = 'block';
                    
                    if (translateY >= 50) {
                        refreshIndicator.textContent = '释放刷新...';
                    } else {
                        refreshIndicator.textContent = '下拉刷新...';
                    }
                }
            });

            document.addEventListener('touchend', e => {
                if (isLoading || isRefreshing) return;
                if (startY === 0) return;
                
                const currentY = e.changedTouches[0].clientY;
                const diff = currentY - startY;
                
                refreshIndicator.style.transform = 'translateY(0)';
                
                if (diff >= 50) {
                    // 触发刷新
                    handleRefresh();
                } else {
                    // 取消刷新
                    refreshIndicator.style.display = 'none';
                }
                
                startY = 0;
            });
        }

        // 处理刷新
        async function handleRefresh() {
            if (isLoading || isRefreshing) return;
            
            isRefreshing = true;
            refreshIndicator.textContent = '正在刷新...';
            
            try {
                currentPage = 1;
                await fetchData();
            } finally {
                isRefreshing = false;
                refreshIndicator.style.display = 'none';
            }
        }

        // 初始化上拉加载更多
        function initInfiniteScroll() {
            window.addEventListener('scroll', () => {
                if (isLoading || isRefreshing) return;
                
                const scrollHeight = document.documentElement.scrollHeight;
                const clientHeight = document.documentElement.clientHeight;
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                
                if (scrollTop + clientHeight >= scrollHeight - 50) {
                    if (currentPage * PAGE_SIZE < total) {
                        fetchData();
                    }
                }
            });
        }

        // 手动触发刷新（用于测试）
        function refresh() {
            handleRefresh();
        }
    </script>
</body>
</html>